<template>
<div class="category">
        <!-- Home搜索框 -->
        <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" />
        <div class="bottom_box">
            <van-sidebar v-model="activeKey" >
            <van-sidebar-item 
             :title="item.name"
             v-for="item in categoryList" 
             :key='item.id' 
             @click="onChange(item.id)"
             />
            </van-sidebar>
            <div class="right">
                <div class="right_top">
                <img :src="currentCategory.banner_url" alt="">
                <p>{{currentCategory.front_name}}</p>
                </div>
                
                <van-divider :style="{ color: '#333', borderColor: '#ccc', padding: '0 100px' }" >
                    {{currentCategory.name}}
                </van-divider>
                <van-grid :column-num="3">
                    <van-grid-item 
                    v-for="item in currentCategory.subCategoryList" 
                    :key="item.id" 
                    :icon="item.wap_banner_url" 
                    :text="item.name" />
                </van-grid>
            </div>
        </div>
</div>
</template>

<script>
import {getCategoryData,getCurrentCategory} from '@/utils/http'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: '',
data() {
return {
    activeKey:0, // 默认导航索引
    categoryList:[],//左侧导航数据
    currentCategory:[],// 分类
    value:'',// 搜索关键字
}
},
props:[''],
components: {

},
methods: {
    onChange(id){
        // 左边导航事件
        // this.activeKey = id
        getCurrentCategory({id:id}).then(res=>{
            console.log(res);
            this.currentCategory = res.data.currentCategory
        }).catch(err=>{
            console.log(err);
        })
    }
},
created() {
    getCategoryData().then(res=>{
        console.log(res);
        this.categoryList = res.data.categoryList
        this.currentCategory = res.data.currentCategory
    })
},
}
</script>

<style lang='less' scoped>
.bottom_box{
    display: flex;
    // color: rgb(128, 128, 128);
    .right{
        flex: 1;
        .right_top{
            position: relative;
            img{
            width: 94%;
            height: 130px;
            display: block;
            filter: brightness(0.5);
            border-radius: 10px;
            box-shadow: 0 0 0.16rem #000;
            margin: 0 10px;
        }
        p{
            position: absolute;
            font-size: 16px;
            text-align: center;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            height: 35px;
            line-height: 35px;
            color: white;
        }
        }
        
    }
}
/deep/.van-sidebar{
    text-align: center;
}
</style>